import React from 'react';
import upperFirst from 'lodash/upperFirst';
import { Icon, Divider, Tooltip } from 'antd';
import { Command, constants } from 'gg-editor';
import styles from './toolBar.less';

const { EditorCommand } = constants;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '/knowledge/static/fonts/font_1518433_oa5sw7ezue.js',
});

const MIND_COMMAND_LIST = [
  EditorCommand.Undo,
  EditorCommand.Redo,
  '|',
  EditorCommand.Copy,
  EditorCommand.Paste,
  EditorCommand.Remove,
  '|',
  EditorCommand.ZoomIn,
  EditorCommand.ZoomOut,
];

const ToolBar = props => {
  function getNameChinese(name) {
    switch (name) {
      case 'undo':
        return '撤销';
      case 'redo':
        return '回退';
      case 'copy':
        return '复制';
      case 'paste':
        return '撤销';
      case 'remove':
        return '删除';
      case 'zoomIn':
        return '放大';
      default:
        return '缩小';
    }
  }

  return (
    <div className={styles.toolbar}>
      {MIND_COMMAND_LIST.map((name, index) => {
        if (name === '|') {
          return <Divider key={index} type="vertical" />;
        }
        return (
          <Command
            key={name}
            name={name}
            className={styles.command}
            disabledClassName={styles.commandDisabled}
          >
            <Tooltip title={getNameChinese(name)}>
              <IconFont
                type={`icon-${name}`}
                // onClick={(e, name) => props.commandClickHandle(e, name)}
              />
            </Tooltip>
          </Command>
        );
      })}
      <Divider key="9" type="vertical" />
      <span className={styles.command} onClick={props?.fitView}>
        <Tooltip title={'自适应屏幕'}>
          <Icon type="apartment" style={{ cursor: 'pointer' }} />
        </Tooltip>
      </span>
      <Divider key="10" type="vertical" />
      <span className={styles.command} onClick={props?.fullScreen}>
        <Tooltip title={upperFirst(props.isFullScreen ? '退出全屏' : '全屏')}>
          <Icon type={props.isFullScreen ? 'export' : 'select'} style={{ cursor: 'pointer' }} />
        </Tooltip>
      </span>
    </div>
  );
};

export default ToolBar;
